<!doctype html>
<html>
<head>
	<!--
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/main.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/mine.css') }}">

<script src="{{ url_for('static',filename='js/jquery-1.12.4.js') }}"></script>
<script src="{{ url_for('static',filename='js/jquery-ui.min.js') }}"></script>
<script src="{{ url_for('static',filename='js/main.js') }}"></script>
-->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->

<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/main.css') }}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/mine.css') }}">

<script src="{{ url_for('static',filename='js/jquery-1.12.4.js') }}"></script>
<script src="{{ url_for('static',filename='js/jquery-ui.min.js') }}"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

<script src="{{ url_for('static',filename='js/main.js') }}"></script>
</head>

<style type="text/css">
	h1{
		text-align:center}
	table{
		margin:0 auto;
		width:100%;
		border:2px solid rgba(202, 223, 238, 0.87);
		border-collapse:collapse}
	table th,table td{
		border:2px solid rgba(202, 223, 238, 0.87);
		padding:5px;
		
		}
	th{
		background-color:rgba(202, 223, 238, 0.87);}
</style>

<body>
	<div class="alldiv">
			<div class="left_navigation" id="left_nav">
				
			</div>
			<script>
				$(left_nav).load('/Public/leftNav')
			</script>

		<div class="righthtml">
			
			<div class="mine_center">
				<div class="mine_center_left">
					<caption><center><h2>Note</h2></center></caption>
					<div class="center_left_bottom">
						<div>
							
							<!-- Nav tabs -->
							<ul class="nav nav-tabs" role="tablist">
							<li role="presentation" class="active"><a href="#Q1" aria-controls="Q1" role="tab" data-toggle="tab">Menu</a></li>
							<li role="presentation"><a href="#Q2" aria-controls="Q2" role="tab" data-toggle="tab">Diet description</a></li>
							<li role="presentation"><a href="#Q3" aria-controls="Q3" role="tab" data-toggle="tab">Health articles</a></li>
			
							</ul>
							
							<!-- Tab panes -->
							<div class="tab-content">
								<div role="tabpanel" class="tab-pane fade in active" id="Q1">
									<div>
										<table>
											<tr align="center">
												<th align="center"> ID </th>
												<th align="center"> Title </th>
												<th align="center"> Content </th>
												<th align="center"> Operation </th>
											</tr>
											<tbody id="menu"></tbody>
										</table>
									</div>	
								</div>
	
								<div role="tabpanel" class="tab-pane fade" id="Q2">
									<div>
										<table location="top">
											<tr align="center">
												<th align="center"> ID </th>
												<th align="center"> Title </th>
												<th align="center"> Content </th>
												<th align="center"> Operation </th>
											</tr>
											<tbody id="diet"></tbody>
										</table>
									</div>
								</div>
	
								<div role="tabpanel" class="tab-pane fade" id="Q3">
									<table>
										<tr align="center">
											<th align="center"> ID </th>
											<th align="center"> Title </th>
											<th align="center"> Content </th>
											<th align="center"> Operation </th>
										</tr>
										<tbody id="health"></tbody>
									</table>
								</div>
							</div>
							
    					</div>
					</div>
				</div>
				
			</div>
		</div>
	</div>
	<script>
		function logout(){
			$.ajax({
				url: "/VitalSigns/logout", 
				type: "POST",  
				data: {
				},
				success: function (result) {
					if (result.message == "success!") {	
						alert("Logout！");
						location.href="/Login/";
					}
					else {
						alert(result.message)
					}
				}
			});
		}

		$(document).ready(function(){
        	$.ajax({
            	url: "/Note/querynote", 
            	type: "POST",  
            	async: false,
            	success: function (result) {
                	if (result.message == "success!") {
                    	$("#note").empty()
                    	var count=0;
                    	for (var i=0 ;i<result.dbdata.length ;i++){
                        	addtableitemnote(result.dbdata[i])                      
                    	} 
                	}
                	else {
                    	alert(result.message)
                	}
            	}
        	});
    	});

    	function addtableitemnote(item){
			if(item[3] == 1){
				var html = $("<tr>"    //开始拼接HTML元素，将取到的东西展示到对用的input中
	            	+"<td>"+item[0]+"</td>"
	    	        +"<td>"+item[1]+"</td>"
					+"<td>"+item[2]+"</td>"
		            +"<td align='center'>"
    		        +"<input type='button' value='add' onclick='addNote(this)'/>"
        		    +"</td></tr>");
            		$("#menu").append(html); 
			} else if(item[3] == 2){
				var html = $("<tr>"    //开始拼接HTML元素，将取到的东西展示到对用的input中
	    	        +"<td>"+item[0]+"</td>"
    	    	    +"<td>"+item[1]+"</td>"
					+"<td>"+item[2]+"</td>"
	            	+"<td align='center'>"
	    	        +"<input type='button' value='add' onclick='addNote(this)'/>"
    	    	    +"</td></tr>");
        	    	$("#diet").append(html); 
			} else {
				var html = $("<tr>"    //开始拼接HTML元素，将取到的东西展示到对用的input中
	    	        +"<td>"+item[0]+"</td>"
    	    	    +"<td>"+item[1]+"</td>"
					+"<td>"+item[2]+"</td>"
	            	+"<td align='center'>"
	    	        +"<input type='button' value='add' onclick='addNote(this)'/>"
    	    	    +"</td></tr>");
        	    	$("#health").append(html); 
			} 
    	}

		function addNote(btn){
        	var tds=$(btn).parent().siblings();//获取当前元素的父节点的全部兄弟节点，就是当前这行的所有td
	        var Id=$(tds).eq(0).text();
    	    
    	    $.ajax({
        	    url: "/Note/addFavourite", 
            	type: "POST",  
	            async: false,
    	        data:{
        	        'id' : Id
            	},
	            success: function (result) {
    	            if (result.message == "success!") {
        	            alert("Add completed")
            	        //$(tds).eq(1).text('completed');              
                	}
                	else {
	                    alert("please don't add again!")
                	}
            	}
        	});
        	
    	}
		
	</script>
</body>
</html>